<template>
    <div class="role-management">
      <!-- 搜索和操作栏 -->
      <div class="operation-bar">
        <el-button type="primary" @click="openDrawer('add')">新增角色</el-button>
      </div>
  
      <!-- 角色表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="80" :index="indexMethod" />
        <el-table-column prop="roleName" label="角色名称" />
        <el-table-column prop="code" label="角色编码" />
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button type="primary" link @click="openDrawer('edit', row)">编辑</el-button>
            <el-button type="danger" link @click="handleDelete(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页组件 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="pageParams.current"
          v-model:page-size="pageParams.size"
          :total="total"
          @current-change="loadData"
          @size-change="loadData"
          layout="total, sizes, prev, pager, next"
        />
      </div>
  
      <!-- 抽屉组件 -->
      <role-drawer
        v-model="drawerVisible"
        :form-data="currentRole"
        :mode="drawerMode"
        @submit="handleSubmit"
      />
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import RoleDrawer from './RoleDrawer.vue'
  import { roleManageApi } from '@/api/role'
  import type { Role } from '@/types'
  
  // 表格数据
  const tableData = ref<Role[]>([])
  const total = ref(0)
  const pageParams = reactive({
    current: 1,
    size: 10
  })
  
  // 加载数据
  const loadData = async () => {
    const res = await roleManageApi.getRolePage(pageParams)
    tableData.value = res.data.records
    total.value = res.data.total
  }
  
  // 序号计算
  const indexMethod = (index: number) => {
    return (pageParams.current - 1) * pageParams.size + index + 1
  }
  
  // 抽屉相关
  const drawerVisible = ref(false)
  const drawerMode = ref<'add' | 'edit'>('add')
  const currentRole = ref<Partial<Role>>({})
  
  const openDrawer = (mode: 'add' | 'edit', row?: Role) => {
    drawerMode.value = mode
    currentRole.value = mode === 'edit' ? { ...row } : {}
    drawerVisible.value = true
  }
  
  // 处理表单提交
  const handleSubmit = async (formData: Role) => {
    if (drawerMode.value === 'add') {
      await roleManageApi.addRole(formData)
    } else {
      await roleManageApi.updateRole(formData)
    }
    ElMessage.success('操作成功')
    loadData()
  }
  
  // 删除处理
  const handleDelete = async (id: number) => {
    await ElMessageBox.confirm('确认删除该角色？', '提示', { type: 'warning' })
    await roleManageApi.deleteRole(id)
    ElMessage.success('删除成功')
    loadData()
  }
  
  // 初始化加载数据
  onMounted(() => {
    loadData()
  })
  </script>
  
  <style lang="scss" scoped>
  .role-management {
    padding: 20px;
  
    .operation-bar {
      margin-bottom: 20px;
    }
  
    .pagination {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
  </style>